import { ref,computed,watch } from 'vue'
import type { AppContext } from '@/common/hooks'
import { px2rpx } from '../utils'
import type {GoodsItem} from '@/common/request/api'
import {getGoodsList,getActivityQueryTitle} from '@/common/request/api'
type Option = {
	layoutType?:1|2|3|4|5|6|7
	styleType?:0|1|2
	paddingX ?: number
	goodsMargin?:number
	goodsRadiusTop?:number
	goodsRadiusBottom?:number
	buttonTextColor?:string
	buttonBackgroundColor?:string
	buttonRadius?:number
	addIconColor?:string
	addIconBackgroundType?:boolean
	addIconBackgroundColor?:string
	circularCarIconColor?:string
	circularCarIconBackgroundType?:boolean
	circularCarIconBackgroundColor?:string
	goodsList?:GoodsItem[]
	isAdvert?:boolean
} & Record<string, any>


export const useLayoutGoodsCompoments = (ctx : AppContext, option : Option,updateGoods?:boolean) => {
	const viewClass = computed(() => {
		if (option.layoutType&&option.layoutType > 2) {
			return option.layoutType < 6 ? 'e-flex e-flex-items-stretch' : 'e-flex e-flex-wrap e-flex-items-stretch'
		} else {
			return ''
		}
	})
	
	const bodyClass = computed(() => {
			return [option.styleType == 1 ? 'shadow' : '', option
				.styleType == 2 ? 'border-dc' : ''
			]
		})
		const layoutClass = computed(() => {
			return `layout${option.layoutType}`
			
		})
	
	const layoutStyle = computed(() => {
		
			let margin = {}
			let px =  px2rpx(option.goodsMargin)
			if (option.layoutType&&option.layoutType < 3) {
				margin = {
					marginBottom: px
				}
			} else if (option.layoutType&&option.layoutType < 6) {
				margin = {
					margin: `0 ${px} ${px} 0`
				}
			} else {
				margin = {
					marginRight: px
				}
			}
			return {
				...margin,
				borderRadius: `${px2rpx(option.goodsRadiusTop)} ${px2rpx(option.goodsRadiusTop)}  ${px2rpx(option.goodsRadiusBottom)} ${px2rpx(option.goodsRadiusBottom)}`,
				'--margin': px,
				'--paddingX':px2rpx(option.paddingX)
			}
		
	})
	
	const swiperMargin = computed(() => {
		if(option.layoutType === 7){
			const padding = option.paddingX||0
			const margin = (option.goodsMargin||0)*2
			return `${((375 - padding - margin)/3)*2}rpx`
		}
		return '0'
	})
	
	const textButtonStyle = computed(() => {
			return {
				color: option.buttonTextColor,
				backgroundColor: option.buttonBackgroundColor,
				borderRadius: px2rpx(option.buttonRadius)
			}
		
	})
	
	const addIconStyle = computed(() => {
			return {
				color: option.addIconColor,
				backgroundColor: option.addIconBackgroundType ? 'rgba(245,34,45,1)' : option
					.addIconBackgroundColor
			}
		
	})
	
	const carIconStyle = computed(() => {
			return {
				color: option.circularCarIconColor,
				backgroundColor: option.circularCarIconBackgroundType ? 'var(--color-primary)' : option
					.circularCarIconBackgroundColor
			}
		
	})
	
	const layoutFlowStyle = computed(() => {
			let margin = {}
			let px = px2rpx(option.goodsMargin)
			if (option.layoutType&&option.layoutType > 2 && option.layoutType < 6) {
				margin = {
					marginRight: px
				}
			} 
			return {
				...margin,
				'--margin': px
			}
		
		
	})
	
	const goodsFlowStyle = computed(() => {
		return {
				marginBottom: px2rpx(option.goodsMargin),
				borderRadius: `${px2rpx(option.goodsRadiusTop)} ${px2rpx(option.goodsRadiusTop)}  ${px2rpx(option.goodsRadiusBottom)} ${px2rpx(option.goodsRadiusBottom)}`
			
		}
	})
	
	const goodsList = ref(option.goodsList||[])
	
	if(updateGoods&&goodsList.value.length){
		getGoodsList({ids: goodsList.value.map(item => item.id).join(',')}).then(res => {
					goodsList.value = res.rows
				})
	}
	
	watch(() => option.goodsList,(v) => {
		if(!v||!updateGoods)return
		const ids = v.map(item => item.id)
		getActivityQueryTitle({productIds: ids.join(',')}).then(res => {
			if (res.code == 200 && res.data?.length) {
				goodsList.value.forEach((item,index) => {
					res.data.forEach(list => {
						if (item.id === list.id) {
							const activity = list.activity ? JSON.parse(list.activity) : null
							item['activity'] = activity
							goodsList.value.splice(index,1,item)
						}
					})
				})
			}
		})
	},{
		immediate:true
	})
	
	
	
	const goodsFlowList = computed(() => {
		return getGoodsFlowList(goodsList.value as any)
	})
	
	const getGoodsFlowList = (arr:GoodsItem[]) => {
		
			let layoutType = option.layoutType
			const isAdvert = option.isAdvert
			let list:Array<GoodsItem[]> = []
			if (layoutType == 5) {
				// layoutType为5时，每行展示三个商品
				list = [
					[],
					[],
					[]
				]
				arr.forEach((item, index) => {
					let num = (index + 1) % 3
					if (num === 0) {
						list[2].push(item)
					} else {
						if (num === 1) {
							list[0].push(item)
						} else {
							list[1].push(item)
						}
					}
		
				})
			}
			if (layoutType == 3 || layoutType == 4) {
				list = [
					[],
					[]
				]
				if (isAdvert) {
					arr.forEach((item, index) => {
						if (index % 2 === 1) {
							list[0].push(item)
						} else {
							list[1].push(item)
						}
					})
				} else {
					arr.forEach((item, index) => {
						if (index % 2 === 0) {
							list[0].push(item)
						} else {
							list[1].push(item)
						}
					})
				}
			}
			return list
		
	}
	
	const goodsStockSold = (value:number) => {
			if (value > 9999) {
				let i = Math.trunc(value / 10000)
				return `${i}${ctx.$t('store.万')}+`
			}
			return value
		
	}
	
	const tapGoods = (goods:GoodsItem) => {
			ctx.$goTo('/pages/classify/goods/info/index',  {
				id: goods.id
			})
		}
	


	
	return {
		viewClass,
		bodyClass,
		layoutClass,
		layoutStyle,
		textButtonStyle,
		addIconStyle,
		carIconStyle,
		layoutFlowStyle,
		goodsFlowStyle,
		swiperMargin,
		goodsFlowList,
		goodsStockSold,
		goodsList,
		tapGoods
	}
}